<template>
	<!-- 自定义瀑布流 -->
	<view class="waterfall-box">
		<view class="waterFall-column">
			<slot :leftList="leftList" name="left"></slot>
		</view>
		<view class="waterFall-column">
			<slot :rightList="rightList" name="right"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "myWaterFall",
		props: {
			dataList: Array
		},
		data() {
			return {
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: []
			}
		},
		watch: {
			"dataList": {
				immediate: true,
				async handler(list) {
					// const that = this
					if (!(list && list.length)) return;
					const right = []
					const left = []
					for (let i = 0; i < list.length; i++) {
						i % 2 === 0 ? left.push(list[i]): right.push(list[i])
					}
					this.leftList = left
					this.rightList = right
					// for (const obj of list) {
						/* 根据图片高度，根据每列的不同高度分发数据，以控制两列数据卡片的高度差距 */
						// const height = await that.getImageInfo(obj['goodsMainImgUrl'])
						// // console.log("imageHeight",height)
						// if (that.leftHeight <= that.rightHeight) {
						// 	that.leftList.push(obj)
						// 	that.leftHeight += height
						// } else {
						// 	that.rightList.push(obj)
						// 	that.rightHeight += height
						// }
						// console.log("leftHeight-rightHeight",that.leftHeight,that.rightHeight)
						// console.log("leftLength-rightLength",that.leftList.length,that.rightList.length)
					// }
					// console.log("leftList-rightList",that.leftList,that.rightList)
				}
			}
		},
		methods:{
			getImageInfo(src){
				return new Promise((resolve) => {
					uni.getImageInfo({
						src,
						success: function({width,height}) {
							const { windowWidth } = uni.getSystemInfoSync()
							const actualHeight = height * (windowWidth/ 2 / width)
							resolve(actualHeight)
						},
						fail() {
							resolve(0)
						}
					});
				})
			}
		}
		// computed:{
		// 	leftList(){
		// 		const list = []
		// 		for (var i = 0; i < this.dataList.length; i++) {
		// 			i % 2 === 0 ? list.push(this.dataList[i]) : null 
		// 		}
		// 		return list
		// 	},
		// 	rightList(){
		// 		const list = []
		// 		for (var i = 0; i < this.dataList.length; i++) {
		// 			i % 2 === 1 ? list.push(this.dataList[i]) : null 
		// 		}
		// 		return list
		// 	}
		// }
	}
</script>

<style>
	.waterfall-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.waterFall-column {
		width: 48%;
		display: flex;
		flex-direction: column;
	}
</style>
